<template>
  <div class="broken-line-comp">
    <div :ref="refName" class="broken-line-container"></div>
  </div>
</template>

<script>
// 折线图表
export default {
  name: 'brokenLine',
  props: {
    // 图表配置参数
    options: {
      type: Object,
      default: () => ({}),
    },
    visible: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // 默认配置
      defaultOptions: {
        grid: {
          left: '3%',
          right: '6%',
          bottom: '3%',
          containLabel: true
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#bac4ff'
          },
          axisLine: { // 轴线
            show: false
          },
          splitLine: { // 坐标轴在 grid 区域中的分隔线
            lineStyle: {
              color: 'rgba(186, 196, 255, .2)'
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [],
          axisLine: { // 轴线
            show: false
          },
          axisTick: { // 刻度
            show: true
          },
          axisLabel: {
            color: '#bac4ff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          },
          formatter: function(val) { // 自定义浮层内容
            const { marker, name, value, seriesName } = val[0];
            return `${name}<br />${marker}${seriesName}: ${value}`;
          }
        }
      },
      // 图表实例
      myCharts: null,
      chartsDom: null,
      refName: `brokenLine${this.$getRandomNum()}`,
      timer: null,
      count: 0,
    };
  },
  watch: {
    visible(data) {
      if (!data) {
        if (this.myCharts) {
          this.myCharts.dispose();
          this.myCharts = null;
          this.addResizeEvt();
        }
        this.count = 0;
        return;
      }
      this.removeEvt();
    },
    options: {
      deep: true,
      // immediate: true,
      handler: function (val) {
        if (this.$checkType(val) === 'object') {
          this.setOption(val);
        }
      }
    }
  },
  mounted() {
    this.init();
    this.addResizeEvt();
  },
  beforeDestroy() {
    this.count = 0;
    this.removeEvt();
  },
  methods: {
    /**
     * 初始化图表
     */
    init() {
      this.chartsDom = this.$refs[this.refName];
      if (!this.chartsDom) return;
      this.myCharts = this.$echarts.init(this.chartsDom);
      this.setOption(this.options);
    },
    /**
     * 设置echarts配置
     * @param data {Object} 配置参数
     */
    setOption(data = {}) {
      if (this.count > 100) {
        this.timer && clearTimeout(this.timer);
        return;
      }
      if (!this.myCharts) {
        this.count++;
        this.timer && clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          this.setOption(data);
        }, 50);
        return;
      }
      this.myCharts.setOption({
        ...this.defaultOptions,
        ...data
      });
    },
    /**
     * 图表resize
     */
    handleResize() {
      this.myCharts && this.myCharts.resize();
    },
    /**
     * 监听图表resize
     */
    addResizeEvt() {
      window.addEventListener('resize', this.handleResize);
    },
    /**
     * 移除图表监听
     */
    removeEvt() {
      this.timer && clearTimeout(this.timer);
      window.removeEventListener('resize', this.handleResize);
    }
  }
};
</script>

<style scoped lang="scss">
  .broken-line-comp {
    width: 100%;
    height: 100%;
    .broken-line-container {
      width: 100%;
      height: 100%;
    }
  }
</style>
